import { Toast } from "antd-mobile";
import { useUploadMutation } from "@store/apiSlice/uploadApiSlice";

interface Props {
  sendImage: (image: Image) => void;
}

export default function Action({ status, sendMsg, sendImage }: Props) {
  // 用于文件上传
  const [upload] = useUploadMutation();
  // 用于上传图片
  const onFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    // 获取文件列表
    const files = event.currentTarget.files;
    // 判断文件列表是否为空
    if (files === null) return;
    // 获取文件
    const file = files[0];
    // 判断文件是否小于5M
    if (file.size / 1024 / 1024 > 5) return Toast.show({ content: "图片不能大于5M" });
    // 创建 formData 对象
    const formData = new FormData();
    // 向 formData 对象中追加图片
    formData.append("file", file);
    // 上传图片
    upload(formData)
      .unwrap()
      .then((response) => {
        // 发送图片
        sendImage(response.data);
      });
  };
  return (
    <input
      accept="image/*"
      disabled={status !== OrderStatus.ConsultChat}
      onChange={onFileChange}
    />
  );
}